<link rel="stylesheet" href="./vantui1.css">
<div id="root">
    <h2>列表</h2>
    <!-- 导航栏 -->
    <van-nav-bar title="首页" @click-left="fatherClickLeftFn" @click-right="fatherClickRightFn"></van-nav-bar>

    <!-- 按钮 -->
    <van-btn @van-button="createFn" title="创建" type="pink"></van-btn>
    <van-btn @van-button="xiugaiFn" title="修改" type="blue"></van-btn>

    <!-- loading -->
    <van-load v-bind:show="true"></van-load>

    <!-- van-tips -->
    <van-tips v-bind:show="true" title="用户名错误咯"></van-tips>

    <!-- table -->
    <van-table v-bind:colmuns="columns1" v-bind:data="data1"></van-table>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./vantui1.js"></script>
<script>

    // 导航栏组件
    // 按钮（留心click貌似原生事件其实自定义重写了
    // loading框
    // 弹框
    // 表格（后期居然毕业了都不会复制 懵逼是正常的 能用不就香了 但是不会用  因此自己写
    // 	https://www.layui.com/demo/table.html
    // 	https://www.iviewui.com/components/table 
    // 等等


    const vm = new Vue({
        el: "#root",
        data: {
            columns1: [
                { title: '编号2', key: 'id' },
                { title: '姓名2', key: 'name' },
                { title: '年龄2', key: 'age' },
                { title: '地址2', key: 'address' },
            ],
            data1: [
                { id: 1, name: '你爱我', age: 18, address: '耶斯莫拉' },
                { id: 2, name: '我爱你', age: 18, address: '百因必有果' },
                { id: 3, name: '蜜雪冰城', age: 8, address: '你的报应就是我' },
                { id: 4, name: '甜蜜蜜', age: 8, address: '记得双击么么哒' },
            ],
        },
        methods: {
            fatherClickLeftFn() {
                // fetch()
                console.log("返回咯");
            },
            fatherClickRightFn() {
                console.log("让我康康在哪");
            },
            createFn() {
                console.log("那就创一个吧");
            },
            xiugaiFn() {
                console.log("改改改");
            }
        }
    })
</script>